<template>
  <div>
      <div class="navBar" @touchmove.prevent>
      <navBar>
        <template v-slot:center>购物车（{{cartList.length}}） </template>
      </navBar>
    </div>
    <div class="scroll">
    <scroll ref="scroll">
    <cartContent :cartList="cartList"
      @selDivClick='selDivClick'
      ref="cartContent"
    ></cartContent>
    
    </scroll>
    </div>
    <div class="total flex  a-c" @touchmove.prevent>
      <div class="totalSel" @click="totalSelClick">
                √
      </div>
      <div class="all" @click="totalSelClick">
          全选 
      </div>
      <div class="cacl">
        合计:￥{{totalPrice}}
      </div>
      <div class="buy">
        购买({{totalNumber}})
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/common/navBar/navBar.vue";
import cartContent from './cartContent.vue'
import scroll from './scroll.vue'

export default {
    name:'cart',
    components:{
      navBar,cartContent,scroll
    },
    data(){
      return {
        cartList:[],
        totalSel:true,
        selList:{}
        }
      },
    created(){
      this.cartList=this.$store.state.cartList
    },
    activated(){
      this.$refs.scroll.bs.refresh()
      
    },
    computed:{
      totalPrice(){
        let total=0
        for(let n=0;n<this.cartList.length;n++){
          if(this.selList[n]){
          total+=(+this.cartList[n].price)*this.cartList[n].count}
        }
        return total.toFixed(2)
      },
      totalNumber(){
        let num=0
        for(let n=0;n<this.cartList.length;n++){
          if(this.selList[n]){
          num+=this.cartList[n].count}
        }
        return num
      }
      
    },
    methods:{
      totalSelClick(){
        this.totalSel=!this.totalSel
        let l=document.querySelectorAll('.sel').length
//给全选加类
        if(!this.totalSel){
          document.querySelector('.totalSel').classList.add('seled')
// 给商品加类
          for (let n = 0; n < l; n++) {
            document.querySelectorAll('.sel')[n].classList.add('seled')         
          }
// 更新selList
          for(let n in this.selList){
            if(n !== 'length'){
              this.selList[n]=false
              this.$refs.cartContent.selList=this.selList
            }
          }
          
        }else{
          // 给商品加类
          for (let n = 0; n < l; n++) {
            document.querySelectorAll('.sel')[n].classList.remove('seled')         
          }
          //给全选加类
          document.querySelector('.totalSel').classList.remove('seled')
          // 更新selList
          for(let n in this.selList){
            if(n !== 'length'){
              this.selList[n]=true
              this.$refs.cartContent.selList=this.selList
            }
          }
        }
      },
      selDivClick(data){
        this.selList=data
        
        let flag=true   //触发flag后说明商品已经全部选中了
        if(data.length!==0){
          for(let n in data){
            if(n !=='length'){
              if(data[n]===false){
                this.totalSel=false
                document.querySelector('.totalSel').classList.add('seled')
                flag=false  //说明商品没有全部选中
              }
            }
          }}
        if(flag){
          this.totalSel=true
          document.querySelector('.totalSel').classList.remove('seled')
        }
      }
    }
}
</script>

<style scoped>

.navBar {
  background-color: rgb(255, 172, 186);
  box-shadow: 0 1px 1px rgba(177, 177, 177, 0.3);
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 999;
}
.totalSel{
    border-radius: 50%;
    background-color: rgb(241, 48, 113);
    color: #fff;
    width: 5vw;
    text-align: center;
    margin-left:2vw;
}
.seled{
  background-color: rgba(97, 86, 86, 0.644)!important;
}
.total{
  position: fixed;
  bottom: 46px;
  left: 0;
  right: 0;
  background-color: rgb(223, 223, 223);
  border-top:1px solid rgb(173, 173, 173) ;
  height: 5vh;
}
.cacl{
  flex: 1;
  margin: 0 5vw;
  width: 45vw;
  font-size: 20px;
  color: rgb(48, 48, 48);
}
.buy{
  width: 30vw;
  background-color: rgb(238, 94, 10);
  color: #fff;
  height: 100%;
  text-align: center;
  font-size: 23px;
  line-height: 5vh;
}
.scroll{
  margin-top: 44px;
}
</style>